<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!-- 登录页面 -->
    <title>login</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!--登录样式-->
    <link href="./css/login.css" rel="stylesheet">

    <script type="text/javascript">
        //点击切换验证码
        $(function () {
            $("#img_checkCode").click(function () {
                    //时间戳，解决缓存问题
                    this.src = "/employees/checkCode?" + new Date().getTime();
                    //todo 虚拟目录怎么动态
                }
            )

            let $loginId = $("#login_id");

            //校验用户名
            function checkLoginId() {
                var id = $loginId.val();
                var flag = id !== "";
                if (flag) {
                    $loginId.css("border", "");
                } else {
                    $loginId.css("border", "1px solid red");
                }
                return flag;
            }

            let $loginPassword = $("#login_password");

            //校验密码
            function checkLoginPassword() {
                var id = $loginPassword.val();
                var flag = id !== "";
                if (flag) {
                    $loginPassword.css("border", "");
                } else {
                    $loginPassword.css("border", "1px solid red");
                }
                return flag;
            }

            let $loginCheckCode = $("#login_checkCode");

            //校验密码
            function checkLoginCheckCode() {
                var id = $loginCheckCode.val();
                var flag = id !== "";
                if (flag) {
                    $loginCheckCode.css("border", "");
                } else {
                    $loginCheckCode.css("border", "1px solid red");
                }
                return flag;
            }

            //表单校验后提交
            $(".main_body_div_form").submit(function () {
                //1.发送数据到服务器
                if (checkLoginId() && checkLoginPassword() && checkLoginCheckCode()) {
                    //校验通过,发送ajax请求，提交表单的数据
                    $.post("/employees/login", $(this).serialize(), function (data) {
                        //$(this).serialize() 序列化表单的数据 作为post的参数（good）
                        //处理服务器响应的数据
                        if (data.code === 1) {
                            //注册成功，跳转成功页面
                            location.href = "index.html";
                        } else {
                            //注册失败,给errorMsg添加提示信息
                            let $alert = $(".alert");
                            $alert.html(data.msg);
                            $alert.css("display", "block");
                            //发送请求未通过后，验证码刷新
                            //$("#img_checkCode").src = "${pageContext.request.contextPath}/employees/checkCode?" + new Date().getTime();
                            $("#img_checkCode").get(0).click()
                        }
                    }, "json");//设置接受到的响应数据的格式
                    //text会把json变string!!
                }

                //2.异步交互，不让表单提交，页面就不会跳转
                return false;
                // 如果这个方法没有返回值，或者返回为true，则表单提交
                // 如果返回为false，则表单不提交
            });

            //当某一个组件失去焦点是，调用对应的校验方法
            $loginId.blur(checkLoginId);
            $loginPassword.blur(checkLoginPassword);
            $loginCheckCode.blur(checkLoginCheckCode);
        });
    </script>
</head>

<body>
<div class="login_main">
    <div class="main_head">
        <div class="main_head_logo"><img alt="logo在此" src=""></div>
        <div class="main_head_name">sp 智慧停车场管理系统</div>
    </div>

    <div class="main_body">
        <h1 class="main_body_title">员工登录</h1>

        <!--为了图片和表单对齐-->
        <div class="main_body_div">
            <form action="" class="main_body_div_form" method="post">
                <table>
                    <tr>
                        <td class="main_body_div_form_table_tr_left"><label for="login_id">员工id：</label></td>
                        <td class="main_body_div_form_table_tr_right"><input id="login_id" name="login_id"
                                                                             placeholder="请输入员工id" type="text">
                    </tr>
                    <tr>
                        <td class="main_body_div_form_table_tr_left"><label for="login_password">密码：</label></td>
                        <td class="main_body_div_form_table_tr_right"><input id="login_password" name="login_password"
                                                                             placeholder="请输入密码" type="password">
                        </td>
                    </tr>
                    <tr>
                        <td class="main_body_div_form_table_tr_left"><label for="login_checkCode">验证码：</label></td>
                        <td class="main_body_div_form_table_tr_right">
                            <input id="login_checkCode" name="login_checkCode" placeholder="请输入验证码" type="text">
                            <img alt="验证码" id="img_checkCode"
                                 src="/employees/checkCode">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="登录"></td>
                    </tr>
                </table>

                <div class="alert alert-danger"></div>
            </form>

            <div class="main_body_div_image">
                <!--todo 登录图片大小设置-->
                <img alt="登录图片" src="">
            </div>
        </div>
    </div>

    <div class="main_tail">
        Copyright&copy; 第5组 刘 林 罗
    </div>
</div>
</body>
</html>